<template>
  <div class="log-container">
    <h1>操作日志</h1>
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>用户ID</th>
        <th>操作</th>
        <th>操作时间</th>
        <th>IP 地址</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="log in logs" :key="log.id">
        <td>{{ log.id }}</td>
        <td>{{ log.userId }}</td>
        <td>{{ log.operation }}</td>
        <td>{{ formatDate(log.operationTime) }}</td>
        <td>{{ log.ipAddress }}</td>
      </tr>
      </tbody>
    </table>
    <button @click="fetchLogs">刷新日志</button>
  </div>
</template>

<script>

export default {
  name: "Log",
  data() {
    return {
      logs: [], // 日志数据
    };
  },
  methods: {
    async fetchLogs() {
      try {
        const response = await this.request.get("/api/logs");
        if (response.code === '200') {
          this.$message.success("日志刷新成功");
          console.log("日志数据：", response.data); // 打印日志数据
          this.logs = response.data; // 赋值给 logs
        }  else {
          this.$message.error("获取日志失败");
        }

      } catch (error) {
        console.error("获取日志失败:", error);
      }
    },
    formatDate(date) {
      if (!date) return "无";
      const options = {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit",
      };
      return new Date(date).toLocaleString("zh-CN", options);
    },
  },
  mounted() {
    this.fetchLogs(); // 页面加载时获取日志数据
  },
};
</script>

<style scoped>
.log-container {
  margin: 20px;
  font-family: Arial, sans-serif;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

button {
  padding: 10px 20px;
  background-color: #007BFF;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
}
</style>
